<template>
  <div class="goods-list">
      <el-row :gutter="16" style="line-height:40px">
        <!-- <el-col :span="4">
          <div class="label-wrap category">
            <label for="">分类：</label>
            <div class="main-content">
              <el-select @change="cateToProd" v-model="categoryvalue" placeholder="请选择" style="width:100%"  size="small">
                <el-option
                  v-for="item in prodCatelist"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col> -->

        <el-col :span="1">
          <div class="label-wrap category">
            <label for="">编号：</label>
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="prod_code" size="small" placeholder="请输入编号" style="width:100%"></el-input>
        </el-col>

        <el-col :span="1">
          <div class="label-wrap category">
            <label for="">名称：</label>
          </div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="prod_name" size="small" placeholder="请输入名称" style="width:100%"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" size="mini" style="width:80px" @click="searchProd" icon="el-icon-search">搜索</el-button>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" size="mini" 
          style="width:100px;margin-left:90px;margin-right:20px" @click="addProdinfo" icon="el-icon-plus">新增装备</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="mini" style="width:90px" icon="el-icon-download" @click="outputTable">导出</el-button>
        </el-col>
      </el-row>

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" border style="width: 100%" v-loading="loading">
            <!-- <el-table-column type="selection" width="50"></el-table-column> -->
            <el-table-column label="装备图片" width="80">
              <template slot-scope="scope">
                <div>
                  <img style="width:50px;height:50px;margin-top:5px" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="prodName" label="装备名称" width="120"></el-table-column>
            <el-table-column prop="prodCode" label="装备编号"></el-table-column>
            <el-table-column prop="categoryTwoName" label="装备类别"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
             <el-table-column prop="emit" label="单位"></el-table-column>
            <!-- <el-table-column prop="supplierCode" label="供应商编号"></el-table-column> -->
            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
            <!-- <el-table-column label="二维码">
              <template slot-scope="scope">
                <vue-qr :logo-src="logoSrc"
                  :size="50"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="scope.row.prodCode" />
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit" @click="detailed(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="deleteItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

     <!-- 弹窗信息 -->
      <addprod :supplierlist='supplierlist' :choseProd="choseProd" :prodCatelist="prodCatelist" :dialogInfo.sync="dialogInfo"></addprod>

      <excel style="display:none" :excelname="excelname" :outPutKey="outputKey" :tableData="tableData" :trueOutExecl.sync="trueOutExecl"></excel>
    
  </div>
</template>

<script>
import VueQr from 'vue-qr';
import excel from '../test/excel';
import { GetProduct, GetProductPage, GetProdCate, DelProduct, SelectByProdCate, SelectByProdInfo, GetSuppier } from '@/api/prod';
import addprod from './dialog/addprod'
export default {
  name: 'goodslist',
  components: {
    addprod,
    excel,
    VueQr
  },
  data() {
    return {
      isSearch: false,
      logoSrc: '',
      loading: true,
      dialogInfo: false,
      trueOutExecl: false,  // 确认是否导出
      outputKey: [],
      excelname: '装备列表',  // 导出表格名字
      categoryvalue: '',
      prod_code: '',
      prod_name: '',
      prodCatelist: [],
      supplierlist: '',
      choseProd: {},
      tableData: [],
      // 分页
      pageNum: 1,
      pageSize: 8,
      total_num: null,
    }
    
  },
  watch: {
    dialogInfo(newVal) {
      if (this.isSearch) {
        this.searchProd()
      } else {
        this.loading = true;
        this.getProducts()
      }
    }
  },
  methods:{
    handleSizeChange(val) {
        console.log(val)
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.pageNum = val;
      if (this.isSearch) {
        this.searchProd()
      } else {
        this.getProducts()
      }
    },
    // 通过切换分类变化商品
    cateToProd(value) {
      SelectByProdCate(value).then( res => {
        let data = res.data;
        this.tableData = data;
      })
    },
    // 搜索商品信息
    searchProd() {
      this.loading = true;
      let reqData = {
        prodCode: this.prod_code,
        prodName: this.prod_name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      SelectByProdInfo(reqData).then( res => {
        let data = res.data.info;
        this.tableData = data.list;
        this.total_num = data.total;
        this.loading = false;
        this.isSearch = true;
      })
    },
    addProdinfo() {
      this.dialogInfo = true;
      this.choseProd = null;
    },
    // 导出表格
    outputTable() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodImg:'装备图片',
            prodName: '装备名称',
            prodCode: '装备编号',
            categoryTwoName: '装备类别',
            prodSpecial: '规格',
            emit: '单位',
            supplierName: '供应商名称',
            prodId: '装备ID'
      }]
    },
    deleteItem(el) {
      this.$confirm('此操作将删除当前商品信息, 是否继续?')
      .then( () => {
        DelProduct(el.prodId).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getProducts()
        })
      }).catch(() => {
        return
      })
    },
    // 获取所有商品信息
    getProducts() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetProductPage(reqData).then( res => {
        let data = res.data.info;
        this.tableData = data.list;
        this.total_num = data.total;
        this.loading = false;
      }).catch( error => {
        console.log(error)
      })
    },
    // 获取所有装备分类
    getProdCates() {
      GetProdCate().then( res => {
        this.prodCatelist = res.data;
      })
    },
    // 获取所有供应商
    getSuppliers() {
      GetSuppier().then( res => {
        this.supplierlist = res.data;
      })
    },
    detailed(data) {
      this.dialogInfo = true;
      this.choseProd = data;
      console.log(this.choseProd)
    },
    EditForm() {
      // const EditForm = this.$store.state.infodetail.ResetFormEdit;
      // // console.log(EditForm);
      // if(EditForm) {
      //   const arr = this.tableData.filter(item => EditForm.id === item.id);
      //   arr[0].title = EditForm.title;
      //   arr[0].category = EditForm.categoryId;
      //   arr[0].date = EditForm.dateTime;
      // }
    }
  },

  mounted() {
    this.getProducts();
    this.getSuppliers()
    this.getProdCates();
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>
  
